<template>
	<div class="box-container">
		<div class="schedule">
			<div class="button-left">
				<div class="week-group">
					<div class="last-week">上一周</div>
					<div class="this-week">本周</div>
					<div class="next-week">下一周</div>
				</div>
				<div class="clear">清空</div>
			</div>
			<div class="button-right">
				<div class="save">保存</div>
				<div class="publish">发布</div>
				<div class="subscribe">引用上周</div>
			</div>
		</div>
		<div class="doctor-box">
			<el-row>
				<el-col :span="18">
					<el-table :data="tableData" style="width: 100%" border>
						<el-table-column prop="date" label="诊所班次" width="180">
						</el-table-column>
						<el-table-column prop="name" label="姓名" width="180">
						</el-table-column>
						<el-table-column prop="address" label="地址">
						</el-table-column>
					</el-table>
				</el-col>
				<el-col :span="6">
					<div class="right-panel">
						<h3>排班医生</h3>
						<div class="doctor-info">
							<img src="../../assets/img/portraint.jpg" alt="123">
							<div class="doctor-msg">
								<p class="doctor-name">陈志斌</p>
								<p class="illness-name">冠心病</p>
							</div>
						</div>
						<div class="doctor-info">
							<img src="../../assets/img/portraint.jpg" alt="123">
							<div class="doctor-msg">
								<p class="doctor-name">陈志斌</p>
								<p class="illness-name">冠心病</p>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<style scoped lang="less">
	.box-container {
		font-size: 14px;

		.schedule {
			margin-bottom: 24px;
			overflow: hidden;


			.button-left {
				float: left;

				div {
					float: left;
					height: 29px;
					line-height: 29px;
					text-align: center;
					cursor: pointer;
				}

				.week-group {
					overflow: hidden; //清除浮动
					margin-right: 30px;

					.this-week {
						border-left: none;
						border-right: none;
					}

					div {
						width: 62px;
						float: left;
						border: 1px solid #cacaca;
					}
				}

				.clear {
					width: 76px;
					border: 1px solid #cacaca;
				}
			}

			.button-right {
				float: right;

				div {
					float: left;
					height: 29px;
					line-height: 29px;
					text-align: center;
					cursor: pointer;
					margin-left: 16px;
					border: 1px solid #cacaca;
					width: 76px;
				}
			}
		}

		.right-panel {
			height: 580px;
			border: 1px solid #e4e4e4;
			background-color: #f8fafc;

			h3 {
				font-size: 18px;
				padding: 24px;
				font-weight: 400;
			}


			.doctor-info {
				margin: 10px 24px;
				padding:0px 20px;
				display: flex;
				align-items: center;

				img {
					width: 35px;
					height: 35px;
					border-radius: 50%;
					margin-right: 40px;
				}

				.illness-name {
					font-size: 12px;
					color: #838484;
				}
			}
		}
	}
</style>
<script>

</script>
